<template>
  <div class="business layout-content">
    <c-table
      :data="business"
      :columns="tableColumn"
      :loading="loading"
      @onReload="queryUserBusiness"
    >
      <template slot="areas" slot-scope="{ row }">
        <c-tags :data="disposeAreas(row.areas)"></c-tags>
      </template>
    </c-table>
  </div>
</template>

<script>
import areaDict from "@/dict/area";
import { queryUserBusinessList } from "@/api/business";

export default {
  data() {
    return {
      loading: false,
      business: [],
      tableColumn: [
        {
          title: "商品品种",
          dataIndex: "categoryName"
        },
        {
          title: "根据地区",
          scopedSlots: { customRender: "areas" }
        }
      ]
    };
  },
  methods: {
    disposeAreas(data) {
      let areas = data.split("");
      let res = [];
      areas.forEach(item => {
        res.push(this.$getEnum(areaDict, item));
      });
      return res;
    },
    queryUserBusiness() {
      this.loading = true;
      queryUserBusinessList()
        .then(res => {
          this.business = res;
        })
        .finally(() => {
          this.loading = false;
        });
    }
  },
  created() {
    this.queryUserBusiness();
  }
};
</script>
